<template>
  <div class="SiteCollect-container">

    <el-card>
      <el-form>

        <template>
          <!-- 头部搜索和按钮 -->
          <el-input prefix-icon="el-icon-search" placeholder="小区、停车场搜索" style="width:200px" size="small" class="inputs" />
          <el-button icon="el-icon-search" size="small" type="primary">搜索</el-button>
          <el-button size="small" type="danger">批量删除</el-button>
          <el-button size="small" type="warning" @click="butnAdd">增加</el-button>
        </template>
      </el-form>
      <!-- 小区内容 -->

      <el-table border :data="list" class="tables">
        <el-table-column type="selection" width="50" />
        <el-table-column label="小区" prop="name" align="center" />
        <el-table-column label="停车场别名" prop="otherName" align="center" />
        <!-- <el-table-column label="价格" prop="total" align="center" /> -->
        <el-table-column label="操作" align="center">
          <template>
            <el-button type="danger" size="small">删除</el-button>
            <el-button type="success" size="small">修改</el-button>
            <el-button type="primary" size="small">详细</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 弹层 -->
      <el-dialog title="增加信息" :visible="showDialog" @close="btnCanel">
        <el-form ref="from" label-width="120px" :model="fromData" :rules="rules">
          <el-form-item label="停车场编号:" prop="region">
            <el-select v-model="fromData.region" style="width:260px" placeholder="请选择卡种">
              <el-option value="1" />
              <el-option value="2" />
              <el-option value="3" />
              <el-option value="4" />
              <el-option value="5" />
              <el-option value="6" />
            </el-select>
          </el-form-item>
          <el-form-item label="价格:" prop="money">
            <el-input v-model="fromData.money" style="width:260px" placeholder="请选择价格">

              <el-option value="10/天" />
              <el-option value="500/季" />
              <el-option value="3000/年" />

            </el-input>
          </el-form-item>
          <el-form-item label="卡种名称:" prop="number">
            <el-select v-model="fromData.number" style="width:260px" placeholder="请选择卡种">

              <el-option value="月卡" />
              <el-option value="季卡" />
              <el-option value="年卡" />

            </el-select>
          </el-form-item>

        </el-form>

        <!-- 放置footer插槽 -->
        <el-row type="flex" justify="center">
          <el-col :span="8">
            <!-- 确定按钮 -->
            <el-button type="primary" @click="btnOK">确定</el-button>
            <!-- 取消按钮关闭弹层 -->
            <el-button @click="btnCanel">取消</el-button>
          </el-col>
        </el-row>
      </el-dialog>
      <!-- 分页内容 -->
      <div class="block">

        <el-pagination

          :page-sizes="[5, 10, 50, 100,200]"
          :page-size="5"
          layout="total, sizes, prev, pager, next, jumper"
          :total="200"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

  </div>
</template>

<script>
import {getAllParkingRule} from '@/api/carpaking'
export default {
  data() {
    return {
      list: [],
      fromData: {
        // 卡种
        region: '',
        // 价格
        money: '',
        // 编号
        number: ''
      },
      rules: {
        region: [{ required: true, message: '停车场编号不能为空', trigger: 'blur' }],
        money: [{ required: true, message: '价格不能为空', trigger: 'blur' }

        ],
        number: [{ required: true, message: '卡种名称不能为空', trigger: 'blur' }]

      },
      showDialog: false
    }
  },
  created() {
   this. getAllParkingRule()
  },
  methods: {
   async getAllParkingRule(){
    this.list= await getAllParkingRule({
       pageIndex:1, pageSize:10, info:'',comId:0
      })
        console.log(this.list);
    },
  
    // 每页多少条
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    // 当前页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    // 增加按钮
    butnAdd() {
      this.showDialog = true// 弹出弹层
    },
    // 取消按钮 关闭弹窗
    btnCanel() {
      this.fromData = {
        // 卡种
        region: '',
        // 价格
        money: '',
        // 编号
        number: ''
      }
      this.showDialog = false
    },
    // 确认按钮
    async btnOK() {
      try {
        await this.$refs.from.validate()
        this.$message.success('校验成功')

        this.showDialog = false
        //  重置校验
        await this.$refs.from.resetFields()
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style>
 .SiteRents-container{
  margin: 0px 20px;

 }
.inputs{
    margin-right: 15px;
  }
  .tables{
    margin-top: 10px;
  }
</style>
